<template lang="pug">
  .clearfix
    Modal(
      width="400"
      v-model="isShowBatchImportBasicDataModal"
      title="导入基数"
      class-name="vertical-center-modal"
    )
      Row
        Col.pl-10(span="24")
          Button.pull-left.mr-10(:to="templateDownLoadUrl" target="_blank") 模板下载
          Upload(
            ref="upload"
            :max-size="10 * 1024"
            :on-exceeded-size="handleMaxSizeTen"
            :before-upload="handleBeforeUploadBatchImportBasicData"
            :on-success="uploadSuccessBatchImportBasicData"
            accept=".xls, .xlsx"
            :action="baseUrl + 'api/EmployeeInsured/ImportInsured'"
            :show-upload-list="false"
            :headers="headers"
          )
            Button(type="info") 导入
        Col.pl-10(span="24")
          .text-gray-9.pt-10.pb-10 仅支持上传10M以内的xlsx文件
        Col.pl-10.pt-10(span="24")
          Tag(v-if="file") {{file.name}}
        Col.pl-10.pt-10(span="24" v-if="errorData.isError")
          Button(type="warning" :to="errorData.downLoadUrl" target="_blank") 下载错误文件

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmitBatchImportBasicData" :loading="!isCanSubmit") 确定
</template>

<script>
import { Common } from '@/utils/common.js'
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  name: '',

  props: {
  },

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      baseUrl: baseUrl,
      isShowBatchImportBasicDataModal: false,
      file: null,
      errorData: {
        errorId: '',
        isError: false,
        downLoadUrl: null
      },
      templateDownLoadUrl: baseUrl + '/Content/Template/批量导入多个客户基数模板.xlsx?random=' + Math.floor(Math.random() * 10),
      isCanSubmit: true
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowBatchImportBasicDataModal = false
      this.file = null
    },

    show () {
      this.isCanSubmit = true
      this.isShowBatchImportBasicDataModal = true
      this.file = null
    },

    // 批量导入-上传前文件
    handleBeforeUploadBatchImportBasicData (file) {
      this.errorData.isError = false
      this.file = file
      console.log('file: ', this.file)
      return false
    },

    // 上传成功
    uploadSuccessBatchImportBasicData (res, row) {
      console.log('上传成功res: ', res)
      console.log('上传成功row: ', row)
      this.isCanSubmit = false
      if (res.success) {
        this.$Message.success(res.message)
        this.isShowBatchImportBasicDataModal = false
        this.errorData.isError = false
        this.file = null
        this.$emit('query')
      } else {
        this.isCanSubmit = true
        if (res.data) {
          this.errorData.isError = true
          this.errorData.downLoadUrl = baseUrl + 'api/EmployeeInsured/ExportErrorFile?fileName=' + res.data
          this.$Message.error('上传有错误，你可以下载错误数据文件')
        } else {
          this.$Message.error({
            content: res.message,
            duration: 10,
            closable: true
          })
        }
      }
    },

    // 确定导入
    handleSubmitBatchImportBasicData () {
      this.isCanSubmit = false
      if (this.file) {
        this.$refs.upload.post(this.file)
        // this.$emit('query')
      } else {
        this.isCanSubmit = true
        this.$Message.warning('请选择文件！')
      }
    },

    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
